// :root {
//     --001-width: 260px;
//     --001-height: 170px;
// }

.DIvHtmlA02 {
	width: 160px;
	height: 40px;
	backdrop-filter: blur(10px);
	border-radius: 6px;
	padding: 0 4px;
	display: flex;
	align-items: center;
	justify-content: flex-start;

	& > .A01 {
		background: white;
		margin-right: 8px;
		height: 32px;
		padding: 0 4px;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
		font-weight: bold;
		font-size: 24px;
		color: #262626;
		line-height: 0px;
		text-shadow: 2px 2px #0c9ace;
		line-height: 24px;
	}

	& > .A02 {
		font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
		font-weight: bold;
		font-size: 24px;
		line-height: 24px;
		color: #ffffff;
		text-shadow: 2px 2px #0c9ace;
	}
}

.Mars3DDiv001 {
	width: 262px;
	height: 107px;
	position: relative;

	&:hover {
		& > .Back {
			cursor: pointer;
			background-image: url("https://image.ljkjkf.com/intellisiteSystem_TieKe/Style/DIV/监控选中.png");
		}
	}

	& > .Back {
		background-image: url("https://image.ljkjkf.com/intellisiteSystem_TieKe/Style/DIV/监控未选中.png");
		background-size: 100%;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		& > div {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #ffffff;
		}

		& > img {
			width: 20px;
			height: 25px;
			margin-right: 40px;
		}
	}

	& > .Column {
		position: absolute;
		content: "";
		top: 75px;
		left: 130px;
		width: 4px;
		height: 100px;
		background: -webkit-linear-gradient(
			top,
			rgba(0, 247, 244, 0.6),
			rgba(0, 247, 244, 0.8),
			rgba(0, 247, 244, 0.1)
		);
		z-index: -1;
		box-shadow: 0 0 4px rgba(0, 109, 192, 1);
	}
}

.Mars3DDiv002 {
	position: relative;
	z-index: 1;

	& > .title {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 1;
		padding: 5px 10px;
		font-size: 25px;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		color: #ffffff;
		border-radius: 2px;
		text-shadow: 0 1px 2px #262626;

		& > div:first-child {
			min-width: 25px;
			height: 25px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background: white;
			margin-right: 15px;
			box-shadow: 0 1px 2px #262626;
		}
	}

	& > .triangle {
		width: 0;
		height: 0;
		border-width: 15px 0 150px 15px;
		border-style: solid;
		position: relative;
		z-index: 1;
		margin-top: -15px;
	}
}

.Mars3DDiv003 {
	& > .title {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 2;
		padding: 5px 10px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 600;
		color: #ffffff;
		text-shadow: 0 1px 2px #262626;
		border: 2px solid;
		background: rgba(0, 53, 129, 0.8);
	}
}

.Mars3DDiv004 {
	position: relative;
	width: 100px;
	height: 90px;

	& > div {
		position: absolute;
		top: 0;
		left: 0;
		white-space: nowrap;
		padding: 0 32px;
		height: 30px;
		line-height: 26px;
		background: rgba(0, 57, 142, 0.8);
		transform: translateX(calc(-50% + 50px));
		border: 2px solid #fffd72;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #ffffff;
	}

	& > img {
		position: absolute;
		bottom: 0;
		left: calc(50% - 27px);
		width: 55px;
		height: 60px;
	}
}

.Mars3DDiv005 {
	position: relative;
	z-index: 1;
	user-select: none;

	& > .title {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
		position: relative;
		z-index: 1;
		padding: 8px 16px;
		border-radius: 8px;
		background: rgba(var(--color), 0.35);
		backdrop-filter: blur(10px);

		& > .One {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 8px;

			& > div:first-child {
				background: white;
				font-size: 18px;
				font-family: ShuHeiTi;
				font-weight: bold;
				margin-right: 8px;
				padding: 4px 8px;
				border-radius: 8px;
			}

			& > div:last-child {
				font-size: 18px;
				font-family: ShuHeiTi;
				color: #262626;
			}
		}

		& > .Two {
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 24px;
			margin-left: 8px;
			font-size: 18px;
			font-family: ShuHeiTi;
			color: #262626;
			font-weight: bold;
		}
	}

	& > .triangle {
		width: 0;
		height: 0;
		border-width: 15px 15px 0;
		border-style: solid;
		position: relative;
		z-index: 1;
		margin-left: 4px;
		border-color: rgba(var(--color), 0.35) transparent transparent;
	}
}

.Mars3DDiv006 {
	position: relative;
	z-index: 1;
	user-select: none;

	& > .title {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
		position: relative;
		z-index: 1;
		padding: 4px 16px;
		border-radius: 8px;
		background: rgba(var(--color), 0.35);
		backdrop-filter: blur(10px);

		& > .One {
			display: flex;
			align-items: center;
			justify-content: center;

			& > div:first-child {
				background: white;
				font-size: 24px;
				line-height: 24px;
				font-family: ShuHeiTi;
				font-weight: bold;
				margin-right: 8px;
				padding: 4px 8px;
				border-radius: 8px;

				text-shadow: 0px -1px 1px #7f7d7d, 1px 0px 1px #868585,
					2px 1px 1px #8f8e8d, 3px 2px 1px #999897, 4px 3px 1px #a3a1a1,
					5px 4px 1px #adabab, 6px 5px 1px #b7b6b5;
			}

			& > div:last-child {
				font-size: 20px;
				font-family: ShuHeiTi;
				color: #262626;
				animation: identifier 2.4s infinite;
			}
		}
	}

	& > .triangle {
		width: 0;
		height: 0;
		border-width: 15px 15px 0;
		border-style: solid;
		position: relative;
		z-index: 1;
		margin-left: 4px;
		border-color: rgba(var(--color), 0.35) transparent transparent;
	}
}

.Mars3DDiv007 {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	position: relative;
	z-index: 1;

	&::after {
		position: absolute;
		content: "";
		left: -5px;
		top: 0;
		width: 10px;
		height: 10px;
		background: var(--color);
		border-radius: 50%;
		animation: spin 1.35s infinite;
		z-index: 1;
	}

	&::before {
		position: absolute;
		content: "";
		left: -5px;
		top: 0;
		width: 10px;
		height: 10px;
		background: var(--color);
		border-radius: 50%;
		z-index: -1;
	}

	& > .title {
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--color);
		backdrop-filter: blur(10px);
		padding: 16px;
		position: absolute;
		border-radius: 6px;
		white-space: pre;
		font-size: 12px;
		font-family: ShuHeiTi;
		color: #e8e8e8;
		text-shadow: 0 0 8px #262626;
		// animation: identifier 2.4s infinite;
	}

	& > .triangle {
		position: absolute;
		left: -2px;
		width: 4px;
		height: 40px;
		background: var(--color);
	}

	&.top {
		.title {
			left: 0;
			bottom: 40px;
			transform: translateX(-50%);
		}

		.triangle {
			bottom: 0;
		}
	}

	&.bottom {
		.title {
			left: 0;
			top: 40px;
			transform: translateX(-50%);
		}

		.triangle {
			top: 0;
		}
	}

	&.left {
		.title {
			right: 46px;
			top: 0;
			transform: translateY(-50%);
		}

		.triangle {
			top: 2px;
			transform-origin: 0 0;
			transform: rotate(90deg);
		}
	}

	&.right {
		.title {
			left: 38px;
			top: 0;
			transform: translateY(-50%);
		}

		.triangle {
			top: 7px;
			transform-origin: 0 0;
			transform: rotate(-90deg);
		}
	}

	&.top-left {
		.title {
			right: 31px;
			bottom: 28px;
		}

		.triangle {
			bottom: 0;
			transform-origin: 0 100%;
			transform: rotate(-45deg);
		}
	}

	&.top-right {
		.title {
			left: 26px;
			bottom: 25px;
		}

		.triangle {
			bottom: 0;
			transform-origin: 0 100%;
			transform: rotate(45deg);
		}
	}

	&.bottom-left {
		.title {
			right: 31px;
			top: 31px;
		}

		.triangle {
			top: 3px;
			transform-origin: 0 0;
			transform: rotate(45deg);
		}
	}

	&.bottom-right {
		.title {
			left: 26px;
			top: 31px;
		}

		.triangle {
			top: 5px;
			transform-origin: 0 0;
			transform: rotate(-45deg);
		}
	}

	&.left-top {
		.title {
			right: 40px;
			top: -24px;
		}

		.triangle {
			top: 2px;
			transform-origin: 0 0;
			transform: rotate(125deg);
		}
	}

	&.left-bottom {
		.title {
			right: 33px;
			top: -34px;
		}

		.triangle {
			top: 2px;
			transform-origin: 0 0;
			transform: rotate(45deg);
		}
	}

	&.right-top {
		.title {
			left: 30px;
			top: -23px;
		}

		.triangle {
			top: 7px;
			transform-origin: 0 0;
			transform: rotate(-125deg);
		}
	}

	&.right-bottom {
		.title {
			left: 28px;
			top: -35px;
		}

		.triangle {
			top: 7px;
			transform-origin: 0 0;
			transform: rotate(-45deg);
		}
	}
}

@keyframes identifier {
	0%,
	100% {
		text-shadow: 0 0 10px #fff, 0 0 10px #fff;
	}

	50% {
		text-shadow: 0 0 10px, 0 0 20px #fff;
	}
}

@keyframes spin {
	to {
		transform: scale(2);
		opacity: 0;
	}
}
